<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行业数据分析中心</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #409eff;
      --primary-light: #e3f2fd;
      --success-color: #67c23a;
      --success-light: #e8f5e9;
      --warning-color: #e6a23c;
      --warning-light: #fff3e0;
      --info-color: #9c27b0;
      --info-light: #f3e5f5;
      --danger-color: #e91e63;
      --danger-light: #fce4ec;
      --text-color: #303133;
      --text-secondary: #606266;
      --border-color: #dcdfe6;
      --bg-color: #f5f7fa;
    }

    body {
      font-family: 'Inter', 'Noto Sans SC', sans-serif;
      background: var(--bg-color);
      margin: 0;
      padding: 0;
      color: var(--text-color);
    }

    .app-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 30px 20px;
    }

    .header {
      background: linear-gradient(135deg, var(--primary-color), var(--success-color));
      color: white;
      padding: 35px 20px;
      border-radius: 16px;
      margin-bottom: 30px;
      text-align: center;
      box-shadow: 0 10px 25px rgba(64, 158, 255, 0.15);
      transition: all 0.3s ease;
    }

    .header:hover {
      box-shadow: 0 15px 30px rgba(64, 158, 255, 0.2);
    }

    .header-title {
      font-size: 2.2rem;
      font-weight: 700;
      margin-bottom: 8px;
      letter-spacing: 1px;
    }

    .header-subtitle {
      font-size: 1.1rem;
      opacity: 0.9;
      max-width: 800px;
      margin: 0 auto;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .grid-cell {
      background-color: white;
      border-radius: 16px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
      border-top: 4px solid transparent;
    }

    .grid-cell:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
      border-top-color: var(--primary-color);
    }

    .grid-header {
      padding: 20px;
      border-bottom: 1px solid #f5f7fa;
      display: flex;
      align-items: center;
    }

    .grid-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      font-size: 24px;
      transition: transform 0.3s ease;
    }

    .grid-cell:hover .grid-icon {
      transform: rotate(10deg) scale(1.1);
    }

    .grid-title {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .industry-tag {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.85rem;
      margin-right: 8px;
      font-weight: 500;
      transition: all 0.2s ease;
    }

    .tag-tech {
      background-color: var(--primary-light);
      color: var(--primary-color);
    }

    .tag-finance {
      background-color: var(--success-light);
      color: var(--success-color);
    }

    .tag-retail {
      background-color: var(--warning-light);
      color: var(--warning-color);
    }

    .tag-health {
      background-color: var(--info-light);
      color: var(--info-color);
    }

    .tag-education {
      background-color: #e0f7fa;
      color: #00bcd4;
    }

    .tag-entertainment {
      background-color: var(--danger-light);
      color: var(--danger-color);
    }

    .tag-transport {
      background-color: #ede7f6;
      color: #512da8;
    }

    .tag-manufacture {
      background-color: #e8eaf6;
      color: #3949ab;
    }

    .tag-energy {
      background-color: #fff8e1;
      color: #ffc107;
    }

    .grid-desc {
      padding: 16px 20px;
      color: var(--text-secondary);
      font-size: 0.95rem;
      flex: 1;
      line-height: 1.6;
    }

    .chart-container {
      width: 100%;
      height: 260px;
      padding: 15px;
    }

    .footer {
      text-align: center;
      margin-top: 50px;
      padding: 20px;
      color: var(--text-secondary);
      font-size: 0.9rem;
      border-top: 1px solid #ebeef5;
    }

    /* 响应式设计 */
    @media (max-width: 1024px) {
      .grid-container {
        grid-template-columns: repeat(2, 1fr);
      }
      .header-title {
        font-size: 1.8rem;
      }
    }

    @media (max-width: 768px) {
      .grid-container {
        grid-template-columns: 1fr;
      }
      .header {
        padding: 25px 15px;
      }
      .header-title {
        font-size: 1.5rem;
      }
      .chart-container {
        height: 220px;
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="app-container">
      <div class="header">
        <h1 class="header-title">行业数据分析中心</h1>
        <p class="header-subtitle">基于大数据分析的行业趋势洞察与市场评估平台</p>
      </div>

      <div class="grid-container">
        <div v-for="item in gridItems" :key="item.id" class="grid-cell" :style="{borderTopColor: item.borderColor}">
          <div class="grid-header">
            <div class="grid-icon" :style="{ backgroundColor: item.iconBgColor }">
              <i :class="item.icon"></i>
            </div>
            <div>
              <div class="grid-title">{{ item.title }}</div>
              <div class="industry-tag" :class="'tag-' + item.industry">{{ item.industryText }}</div>
            </div>
          </div>
          <div class="grid-desc">{{ item.desc }}</div>
          <div class="chart-container" :id="'chart-' + item.id"></div>
        </div>
      </div>

      <div class="footer">
        <p>© {{ new Date().getFullYear() }} 行业数据分析中心 | 数据实时更新中</p>
      </div>
    </div>
  </div>

  <script>
    const { createApp, ref, onMounted, computed } = Vue;
    const app = createApp({
      setup() {
        const gridItems = ref([
          {
            id: 1,
            title: "科技行业用户增长",
            desc: "近12个月科技行业主流产品的月活跃用户增长趋势分析，包含移动端与PC端数据对比",
            industry: "tech",
            industryText: "科技",
            chartType: "line",
            icon: "fa fa-laptop",
            iconBgColor: "#e3f2fd",
            borderColor: "#409eff"
          },
          {
            id: 2,
            title: "金融产品市场份额",
            desc: "2024年Q2金融行业主要产品类型市场占有率分布，涵盖银行、保险、证券等细分领域",
            industry: "finance",
            industryText: "金融",
            chartType: "pie",
            icon: "fa fa-money",
            iconBgColor: "#e8f5e9",
            borderColor: "#67c23a"
          },
          {
            id: 3,
            title: "零售行业销售对比",
            desc: "不同零售渠道（线上电商/线下商超/社区团购）近半年销售额对比及环比增长分析",
            industry: "retail",
            industryText: "零售",
            chartType: "bar",
            icon: "fa fa-shopping-cart",
            iconBgColor: "#fff3e0",
            borderColor: "#e6a23c"
          },
          {
            id: 4,
            title: "健康医疗满意度",
            desc: "患者对不同类型医疗机构（综合医院/专科医院/私立诊所）的服务满意度多维评估",
            industry: "health",
            industryText: "医疗",
            chartType: "radar",
            icon: "fa fa-medkit",
            iconBgColor: "#f3e5f5",
            borderColor: "#9c27b0"
          },
          {
            id: 5,
            title: "教育科技投资趋势",
            desc: "2022-2024年教育科技领域各细分方向（AI教学/在线课程/教育硬件）的投资金额变化",
            industry: "education",
            industryText: "教育",
            chartType: "line",
            icon: "fa fa-graduation-cap",
            iconBgColor: "#e0f7fa",
            borderColor: "#00bcd4"
          },
          {
            id: 6,
            title: "娱乐平台用户分布",
            desc: "不同年龄段用户在短视频/长视频/直播/游戏等娱乐平台的使用时长占比分析",
            industry: "entertainment",
            industryText: "娱乐",
            chartType: "bar",
            icon: "fa fa-film",
            iconBgColor: "#fce4ec",
            borderColor: "#e91e63"
          },
          {
            id: 7,
            title: "交通运输能耗分析",
            desc: "公路/铁路/航空/水运等交通方式在不同运距下的单位能耗对比研究",
            industry: "transport",
            industryText: "交通",
            chartType: "radar",
            icon: "fa fa-car",
            iconBgColor: "#ede7f6",
            borderColor: "#512da8"
          },
          {
            id: 8,
            title: "制造业生产效率",
            desc: "自动化技术应用前后，制造业各关键环节（冲压/焊接/组装）的生产效率提升对比",
            industry: "manufacture",
            industryText: "制造",
            chartType: "line",
            icon: "fa fa-cogs",
            iconBgColor: "#e8eaf6",
            borderColor: "#3949ab"
          },
          {
            id: 9,
            title: "能源消耗结构",
            desc: "工业/建筑/交通/居民等领域的能源消耗类型（电力/煤炭/石油/天然气）占比分析",
            industry: "energy",
            industryText: "能源",
            chartType: "pie",
            icon: "fa fa-bolt",
            iconBgColor: "#fff8e1",
            borderColor: "#ffc107"
          }
        ]);

        // 模拟API数据（实际应用中应替换为真实API请求）
        const getChartData = (chartType) => {
          const now = new Date();
          const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
          const years = ['2022', '2023', '2024'];
          
          switch(chartType) {
            case 'line':
              return {
                xAxisData: months.slice(now.getMonth(), 12).concat(months.slice(0, now.getMonth())),
                seriesData: Array(12).fill(0).map(() => Math.floor(Math.random() * 80) + 20)
              };
              
            case 'bar':
              return {
                xAxisData: ['18-25岁', '26-35岁', '36-45岁', '46-55岁', '56岁以上'],
                seriesData: Array(5).fill(0).map(() => Math.floor(Math.random() * 100))
              };
              
            case 'pie':
              return {
                pieData: [
                  {value: Math.floor(Math.random() * 30) + 10, name: '银行'},
                  {value: Math.floor(Math.random() * 25) + 5, name: '保险'},
                  {value: Math.floor(Math.random() * 20) + 5, name: '证券'},
                  {value: Math.floor(Math.random() * 15) + 5, name: '基金'},
                  {value: Math.floor(Math.random() * 20) + 5, name: '其他'}
                ]
              };
              
            case 'radar':
              return {
                radarIndicator: [
                  {name: '服务态度', max: 100},
                  {name: '医疗水平', max: 100},
                  {name: '设备条件', max: 100},
                  {name: '就诊环境', max: 100},
                  {name: '候诊时间', max: 100},
                  {name: '费用合理性', max: 100}
                ],
                radarData: Array(6).fill(0).map(() => Math.floor(Math.random() * 80) + 20)
              };
              
            default:
              return {
                xAxisData: months,
                seriesData: Array(12).fill(0).map(() => Math.floor(Math.random() * 100))
              };
          }
        };

        // 初始化图表
        const initCharts = () => {
          for (const item of gridItems.value) {
            try {
              const chartDom = document.getElementById(`chart-${item.id}`);
              if (!chartDom) continue;

              const myChart = echarts.init(chartDom);
              const chartData = getChartData(item.chartType);
              let option;

              // 基础图表配置
              const baseOption = {
                tooltip: {
                  trigger: 'axis',
                  backgroundColor: 'rgba(255, 255, 255, 0.9)',
                  borderColor: '#ebeef5',
                  borderWidth: 1,
                  textStyle: { color: '#303133' },
                  transitionDuration: 0.2
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true,
                  border